import React, { useEffect, useCallback } from "react";
import * as echarts from 'echarts';
import request from '../utils/request'
function Lollege() {


    useEffect(function () {
        console.log(987);
        getdata()


    }, [])
    const getdata = useCallback(
        async () => {
            const data = await request.get("student/legend");
            console.log(data.data.ret.data);
            datalist(data.data.ret.data)
        },
        [],
    )

    const datalist = useCallback((data) => {
        var chartDom = document.getElementById('box');


        var myChart = echarts.init(chartDom);
        var option;



        option = {
            title: {
                text: '各学院人数比例',
                // subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            // 是否需要左边演示栏
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: data.xk, name: '信息科学与工程学院' },
                        { value: data.qc, name: '汽车工程学院' },
                        { value: data.jj, name: '经济管理学院' },
                        { value: data.tm, name: '土木建筑工程学院' },
                        { value: data.sj, name: '设计艺术学院' },
                        { value: data.jx, name: '机械工程学院' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option)
    }, [])


    return (
        <div style={{ textAlign: "center" }}>
            <div id="box" style={{
                height: 600, width: 600, margin: "auto"
            }}></div>
        </div>
    )
}
export default Lollege